<template>
  <button type="button" @click="handleStart">开始放烟花</button>
  <input
    v-model="age"
    placeholder="count"
    placeholder-class="input-placeholder"
    @input="handleInput"
  />
  <span>{{ age }}</span>
  <div class="content">
    {{ age }}
    <button @click="handleAgeIncrease">加一岁</button>
    <div class="img-wrap" style="background: #00ff00">
      <img src="@/assets/imgs/under-line2.png" style="display: block" />
    </div>
  </div>
  <h2><router-link to="/login">退出登录</router-link></h2>
</template>
<script lang="ts" setup name="home">
// import {ref} from 'vue'
import { useUserStore } from "@/store/user";
const userStore = useUserStore();
// console.log("userStore", userStore, userStore.age);
const { name, age, gender } = storeToRefs(userStore);
const count = ref();
const obj = reactive({ a: 2 });
const handleInput = (ev) => {
  // console.log("ee", ev);

  window.ageBreak = ev.target.value;
  // console.log("window.ageBreak", window.ageBreak);
};
const handleAgeIncrease = () => {
  userStore.age++;
  // console.log("userStore.age", userStore.age);
};

const playABoom = () => {
  const container = document.getElementById("root");
};
const handleStart = (ev) => {
  let iterval = 800;
  let t;
  t && clearInterval(t);
  playABoom();
  t = setInterval(playABoom, iterval);
};

onMounted(() => {});
</script>
